<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GrapesJS Editor</title>
  <!-- Link GrapesJS stylesheets -->
  <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
  <!-- Link GrapesJS scripts -->
  <script src="https://unpkg.com/grapesjs"></script>
</head>
<body>

<!-- Editor Container -->
<div id="gjs"></div>

<!-- Side Toolbar -->
<div id="side-toolbar">
  <!-- Add your side toolbar content here -->
  <button onclick="addTextComponent()">Add Text</button>
  <button onclick="addImageComponent()">Add Image</button>
</div>

<script>
  // Initialize GrapesJS editor
  var editor = grapesjs.init({
    container: '#gjs',
    components: '',
    style: '',
    plugins: [],
    allowScripts: true,
    canvas: {}
  });

  // Function to add text component
  function addTextComponent() {
    editor.BlockManager.add('text-block', {
      label: 'Text',
      content: '<div contenteditable="true">Your Text Here</div>',
    });
  }

  // Function to add image component
  function addImageComponent() {
    editor.BlockManager.add('image-block', {
      label: 'Image',
      content: '<img src="your-image-url.jpg">',
    });
  }
</script>

</body>
</html>
